html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}
body{line-height:1;color:#000;background:#fff}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0;vertical-align:middle}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
a img{border:none}
@media (orientation:landscape){html.ipad.ios7 > body{position:fixed;bottom:0;width:100%;height:672px !important}
}.hbox{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-ms-box-orient:horizontal;box-orient:horizontal}
.vbox{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-box-orient:vertical;box-orient:vertical}
.flex1{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-ms-flex:1 0 auto}
.flex2{-webkit-box-flex:2;-moz-box-flex:2;-o-box-flex:2;-ms-box-flex:2;box-flex:2;-ms-flex:2 0 auto}
.flex3{-webkit-box-flex:3;-moz-box-flex:3;-o-box-flex:3;-ms-box-flex:3;box-flex:3;-ms-flex:3 0 auto}
.flex4{-webkit-box-flex:4;-moz-box-flex:4;-o-box-flex:4;-ms-box-flex:4;box-flex:4;-ms-flex:4 0 auto}
.flex5{-webkit-box-flex:5;-moz-box-flex:5;-o-box-flex:5;-ms-box-flex:5;box-flex:5;-ms-flex:5 0 auto}
.flex6{-webkit-box-flex:6;-moz-box-flex:6;-o-box-flex:6;-ms-box-flex:6;box-flex:6;-ms-flex:6 0 auto}
.flex7{-webkit-box-flex:7;-moz-box-flex:7;-o-box-flex:7;-ms-box-flex:7;box-flex:7;-ms-flex:7 0 auto}
.flex8{-webkit-box-flex:8;-moz-box-flex:8;-o-box-flex:8;-ms-box-flex:8;box-flex:8;-ms-flex:8 0 auto}
.flex9{-webkit-box-flex:9;-moz-box-flex:9;-o-box-flex:9;-ms-box-flex:9;box-flex:9;-ms-flex:9 0 auto}
.flex10{-webkit-box-flex:10;-moz-box-flex:10;-o-box-flex:10;-ms-box-flex:10;box-flex:10;-ms-flex:10 0 auto}
.listview {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    overflow: hidden;
}
/*包含下拉控件*/
.listview.withpulldown .scroller{
    margin-top: -50px;
    /*-webkit-transform: translate(0px, -50px);*/
}
/*临时状态，已下拉*/
.listview.pulleddown .scroller{
    margin-top: 0px;
    /*-webkit-transform: translate(0px, 0px);*/
}

.scroller {
    position: absolute;
    width: 100%;
}

.scroller ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

.scroller li {
    height: 60px;
    border-bottom: 1px solid #cccdd1;
    /*border-top: 1px solid #fff;*/
    background-color: #ecedf1;
}

.scroller li:last-child {
    border-bottom-width: 0;
}

/* listview editing & selecting */
.scroller li .selection {
    float: left;
    width: 30px; height: 100%;

    position: relative;

    /*animation style*/
    margin-left: -30px;
    -webkit-transition: margin-left .25s;
    -moz-transition: margin-left .25s;
    transition: margin-left .25s;
}

.scroller li.editing .selection{
    /*animation style*/
    margin-left: 0px;
}

.scroller li .selection span {
    position: absolute;
    width: 10px; height: 10px;
    -webkit-border-radius: 50px;
    top: 50%; left: 50%; margin-top: -5px; margin-left: -5px;
    border: 1px solid #359af6;
}

.scroller li .selection.selected span {
    background: #359af6;
}

.pulldown, .pullup {
    padding: 5px 10px;
    height: 50px;
    line-height: 40px;
    font-weight: bold;
    font-size: 14px;
    color: #888;
    text-align: center;
}
.pulldown .label, .pullup .label {
    position: absolute;
    left: 0px; right: 0px;
}
.pulldown .icon, .pullup .icon {
    display: block;
    float: left;
    width: 40px;
    height: 40px;
    background:  url("") 0 0 no-repeat;
    -webkit-background-size: 40px 80px;
    background-size: 40px 80px;
    -webkit-transition: -webkit-transform 250ms;
}
.pulldown .icon {
    -webkit-transform: rotate(0deg) translateZ(0);
}
.pullup .icon {
    -webkit-transform: rotate(-180deg) translateZ(0);
}
.pulldown.flip .icon {
    -webkit-transform: rotate(-180deg) translateZ(0);
}
.pullup.flip .icon {
    -webkit-transform: rotate(0deg) translateZ(0);
}
.pulldown.loading .icon, .pullup.loading .icon {
    background-position: 0 100%;
    -webkit-transform: rotate(0deg) translateZ(0);
    -webkit-transition-duration: 0ms;
    -webkit-animation-name: loading;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes loading {
    from { -webkit-transform: rotate(0deg) translateZ(0); }
    to { -webkit-transform: rotate(360deg) translateZ(0); }
}

/*加载更多按钮，这里有一个巧妙的的地方，文字和loading icon的显隐是互斥的，这里在他们的父元素加上或删除.loading class实现*/
.loadmore {
    width: 100%;
    border: 0px;
    margin-bottom: 0px;
    padding: 10px 0px;
    display: none;
}
.loadmore.visible{
    display: block;
}
.loadmore .label {
    line-height: 40px;/*与icon同高，保证是否loading状态，loadmore高度不变*/
    width: 100%; text-align: center;
    display: block;
}
.loadmore .icon {
    margin: 0 auto;
    display: none;
    width: 40px;
    height: 40px;
    background:  url("") 0 0 no-repeat;
    -webkit-background-size: 40px 80px;
    background-size: 40px 80px;
    background-position: 0 100%; /*这里是两个图片组合成一个，下面那个是loading*/
    -webkit-transition: -webkit-transform 250ms;
}
.loadmore.loading .icon {
    display: block;
    -webkit-transform: rotate(0deg) translateZ(0);
    -webkit-transition-duration: 0ms;
    -webkit-animation-name: loading;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
.loadmore.loading .label {
    display: none;
}

.listview .message {
    width: 100%; height: 40px;
    line-height: 40px;
    text-align: center;
    display: none;
}
.listview .message.visible {
    display: block;
}
.listview .message > div {
    display: none;
}
.listview .message > div.visible {
    display: block;
}
.notification {
    z-index: 999;
    position: fixed;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;

    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;

    padding: 0px 40px;

    bottom: -40px;
    -webkit-transition: bottom 1.25s;
    -moz-transition: bottom 1.25s;
    transition: bottom 1.25s;
}
.notification.active {
    bottom: 0px;
}
.notification.well {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.notification.info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}
.notification.warning {
    background-color: #ffc657;
    border-color: #e8b10d;
    color: #855d10;
}
.notification.error {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}
